<template>
  <div>
    <div class="hotTitle">
      <img src="@/assets/images/hot.png" alt="" class="hotImg" />
      <a href="##" class="more">查看更多&gt;</a>
    </div>
    <ul class="list">
      <li v-for="(item, index) in newsList" :key="index">
        <van-row>
          <van-col span="3"> <span class="red">最新</span></van-col>
          <van-col span="19">
            <a href="##" class="text">{{ item.title }}</a></van-col
          >
          <van-col span="2"> <span class="gt">&gt;</span></van-col>
        </van-row>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyHotInfo",
  // props: ["newsList"],
  data() {
    return {
      newsList: [
        {
          id: "f8f018a240057e0c5f49b3bd54b5d940",
          ctime: "2022-12-25 00:00",
          title: "北京儿童医院满负荷运行 全力以赴救治患儿",
          description: "",
          source: "中华国内",
          picUrl:
            "https://img2.utuku.imgcdc.com/300x200/news/20221225/8eda1618-af90-4fc4-b055-b54c2d9ea106.png",
          url: "https://news.china.com/domestic/945/20221225/44164897.html",
        },
        {
          id: "68b4dd98382b0fc153509e1a61201272",
          ctime: "2022-12-25 00:00",
          title: "2023年全国硕士研究生招生考试拉开帷幕",
          description: "",
          source: "中华国内",
          picUrl:
            "https://img2.utuku.imgcdc.com/300x200/news/20221225/29325e57-a104-4cfd-85ee-745849eb6aee.jpg",
          url: "https://news.china.com/domestic/945/20221225/44164925.html",
        },
        {
          id: "1c672a55d52ff0eae5d4bfe45bc14255",
          ctime: "2022-12-25 00:00",
          title: "新疆塔城大街小巷挂红灯笼迎新年",
          description: "",
          source: "中华国内",
          picUrl:
            "https://img2.utuku.imgcdc.com/300x200/news/20221225/d5123daa-adff-4f5b-be77-ea24a6bbcde7.jpg",
          url: "https://news.china.com/domestic/945/20221225/44164934.html",
        },
        {
          id: "4c00327e5b7bba08354edb06656fa9ba",
          ctime: "2022-12-25 00:00",
          title: "全球首架C919客机进行载客前飞行训练",
          description: "",
          source: "中华国内",
          picUrl:
            "https://img2.utuku.imgcdc.com/300x200/news/20221225/33e3ade9-9540-4650-b9b2-c7a1ecb8084a.jpg",
          url: "https://news.china.com/domestic/945/20221225/44164943.html",
        },
        {
          id: "55a02ccc2728d77813c945a10ae0e688",
          ctime: "2022-12-25 00:00",
          title: "广东问责省运会男足假球事件：16人被处理",
          description: "",
          source: "中华国内",
          picUrl:
            "https://img0.utuku.imgcdc.com/300x200/news/20221225/03168e8c-1396-4576-a05b-fe4946c12d79.jpg",
          url: "https://news.china.com/domestic/945/20221225/44164879.html",
        },
        {
          id: "1c011526117a30304e2cc8c59db445b8",
          ctime: "2022-12-25 00:00",
          title: "北京多家餐馆再现排队等位，业内预计元旦客流回升",
          description: "",
          source: "中华国内",
          picUrl:
            "https://img3.utuku.imgcdc.com/300x200/news/20221225/049a0407-7104-4d49-8036-13b4b82a7fea.octet-stream",
          url: "https://news.china.com/domestic/945/20221225/44164888.html",
        },
        {
          id: "ff9c93cc6e684e074bb25625c246e479",
          ctime: "2022-12-25 00:00",
          title: "江苏无锡投放50万片布洛芬 135个医疗网点全覆盖",
          description: "",
          source: "中华国内",
          picUrl:
            "https://img0.utuku.imgcdc.com/300x200/news/20221225/50f1b53b-3063-4575-9f5e-2880a5f7ce14.jpg",
          url: "https://news.china.com/domestic/945/20221225/44164639.html",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.hotTitle {
  margin-top: 0.15rem;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  align-items: center;
  &::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    width: 0.07rem;
    height: 0.25rem;
    background-color: #1989fa;
  }
  .hotImg {
    width: 1.4rem;
    height: 0.48rem;
    padding-left: 0.6em;
    margin: 0 0.15rem;
  }
  .more {
    font-size: 0.2rem;
    padding-right: 0.1rem;
    color: #1989fa;
  }
}
.list {
  margin: 0.2rem;
  border-bottom: 1px solid #eee;

  li {
    padding-bottom: 0.1rem;
    margin: 0.1rem 0;

    // line-height:0.2rem ;
    .red {
      display: inline-block;
      background-color: #ff5555;
      color: white;
      border-radius: 0.03rem 0.04rem;
      padding: 0.02rem;
      font-size: 12px;
    }
    .text {
      display: inline-block;
      width: 5rem;
      height: 20px;
      font-size: 14px;
      color: #1a1a1a;
      /*第一步： 溢出隐藏 */
      overflow: hidden;
      /* 第二步：让文本不会换行， 在同一行继续 */
      white-space: nowrap;
      /* 第三步：用省略号来代表未显示完的文本 */
      text-overflow: ellipsis;
    }
    .gt {
      color: #ccc;
    }
  }
}
</style>